<template>
	<div class="edit-popup">
		<popup ref="popupRef" title="添加渠道" :async="true" width="1200px" @confirm="handleSubmit" @close="handleClose">
			<el-card class="!border-none" shadow="never">
			  <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
			    <el-form-item label="主营业务">
			      <el-select class="w-[200px]" v-model="queryParams.cate_id" placeholder="请选择" clearable filterable >
			        <el-option v-for="item in productCateList" :key="item.id" :label="item.name" :value="item.id" />
			      </el-select>
			    </el-form-item> 
			    <el-form-item label="渠道名称">
			      <el-input class="w-[200px]" v-model="queryParams.name" clearable />
			    </el-form-item>
				 <el-form-item label="电话">
				   <el-input class="w-[200px]" v-model="queryParams.account" clearable />
				 </el-form-item>
			    <el-form-item>
			      <el-button type="primary" @click="getDetail">查询</el-button>
			    </el-form-item>
			  </el-form>
			</el-card>
			<el-table ref="multipleTable" :data="channelList" v-loading="loading" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
			    <el-table-column type="selection" width="55"></el-table-column>
			    <el-table-column prop="real_name" label="姓名" width="120"></el-table-column>
			    <el-table-column prop="avator" label="头像" width="120">
					<template #default="{ row }">
						<el-avatar :src="row.avator" :size="58" />
					</template>
				</el-table-column>
				<el-table-column prop="position" label="职务" width="120"></el-table-column>
				<el-table-column prop="wechat_no" label="微信" width="120"></el-table-column>
				<el-table-column prop="account" label="电话" width="120"></el-table-column>
				<el-table-column prop="company_name" label="公司" width="120"></el-table-column>
				<el-table-column prop="company_address" label="地址"></el-table-column>
				<el-table-column prop="name" label="主营业务">
					<template #default="{ row }">
						<span v-for="(child,i) in row.product_cate_arr" :key="'product_cate_arr'+i">{{child.name}}、</span>
					</template>
				</el-table-column>
			</el-table>
		</popup>
	</div>
</template>
<script lang="ts" setup>
	import type { FormInstance } from 'element-plus'
	import { channelLists, productCateLists } from '@/api/product/product';
	import Popup from '@/components/popup/index.vue'
	import { getModulesKey } from '@/router'
	const channelList = ref([])
	const loading = ref(false)
	const multipleSelection = ref([])
	const handleSelectionChange = (val:any) => {
		console.log(val);
		multipleSelection.value = val;
	}
	let multipleTable:any;
	nextTick(()=>{
		multipleTable = ref();
	})
	const toggleSelection = (rows:any)=> {
		if (rows) {
			rows.forEach((row:any,index:number) => {
				// console.log(234,multipleTable);
				// this.$refs.multipleTable.toggleRowSelection(row);
				// multipleTable.value.toggleRowSelection(row)
				multipleTable.value.toggleRowSelection(rows[index]);
			});
		} else {
			// this.$refs.multipleTable.clearSelection();
			// multipleTable.value.clearSelection()
		}
	}
	const setFormData = async(data : Record<any, any>) => {
		console.log(data);
		multipleSelection.value = data.pid;
		getDetail();
		const {lists}  = await productCateLists({page_no: 1,page_size: 9999});
		productCateList.value = lists || [];
	}
	const productCateList:any = ref([])
	const queryParams:any = reactive({
		cate_id: null,
		name: '',
		account: ''
	})
	const getDetail = async () => {
		loading.value = true;
		const data = await channelLists({
			page_no: 1,
			page_size: 9999,
			cate_id: queryParams.cate_id,
			name: queryParams.name,
			account: queryParams.account
		})
		channelList.value=data.lists || [];
		loading.value = false;
		// await nextTick()
		// toggleSelection(multipleSelection);
	}
	const handleSubmit = async () => {
		// mode.value == 'edit' ? await productCateEdit(newFormData) : await productCateAdd(newFormData)
		popupRef.value?.close()
		emit('success',multipleSelection.value)
	}
	
	const emit = defineEmits(['success', 'close'])
	const formRef = shallowRef<FormInstance>()
	const popupRef = shallowRef<InstanceType<typeof Popup>>()
	const mode = ref('add')

	const componentsOptions = ref(getModulesKey())
	const querySearch = (queryString : string, cb : any) => {
		const results = queryString
			? componentsOptions.value.filter((item) =>
				item.toLowerCase().includes(queryString.toLowerCase())
			)
			: componentsOptions.value
		cb(results.map((item) => ({ value: item })))
	}
	const formData:any = reactive({
		id: '',
		//名称
		name: '',
		//业务流程
		business_stage: [],
		//备注
		remark: '',
		//启用状态
		is_enable: 1
	})

	const formRules = {
		name: [
			{
				required: true,
				message: '请输入分类名称',
				trigger: 'blur'
			}
		],
		business_stage: [
			{
				required: true,
				message: '请编辑业务流程',
				trigger: 'blur'
			}
		],
		component: [
			{
				required: true,
				message: '请选择启用状态',
				trigger: 'blur'
			}
		]
	}
	const menuOptions = ref<any[]>([])

	const open = (type = 'add') => {
		mode.value = type
		popupRef.value?.open()
	}
	
	const addBusinessStage = () => {
		formData.business_stage.push({name:''});
	}
	
	const deleteBusinessStage = (i:any) => {
		formData.business_stage.splice(i,1);
	}

	const handleClose = () => {
		emit('close')
	}

	defineExpose({
		open,
		setFormData,
		getDetail
	})
</script>